<template>
  <el-dialog title="选择联系人" :visible="dialogVisible" width="60%" :before-close="onClose">
    <!-- 弹窗主体部分，分成两列 -->
    <div class="dialog-content">
      <!-- 左侧选择联系人部分 -->
      <div class="left-column">
        <el-input placeholder="输入用户名或昵称进行搜索，最多展示20条" class="input-with-select" v-model="searchText"
          @keyup.enter.native="onSearch">
          <i class="el-icon-search el-input__icon" slot="suffix" @click="onSearch"></i>
        </el-input>
        <el-scrollbar style="height: 300px">
          <div v-for="user in filteredUsers" :key="user.id" class="user-item">
            <el-checkbox :label="user" v-model="selectedUsers" class="user-checkbox">
              <div class="item" style="display: flex;justify-content: center;align-items: center;">
                <div class="avatar">
                  <head-image :name="user.nickName" :url="user.headImage" :online="user.online"></head-image>
                </div>
                <div class="add-friend-text">
                  <div class="text-user-name">
                    <div>{{ user.userName }}</div>
                    <div :class="user.online ? 'online-status online' : 'online-status'">
                      {{ user.online ? '[在线]' : '[离线]' }}
                    </div>
                  </div>
                  <div class="text-nick-name">
                    <div>昵称: {{ user.nickName }}</div>
                  </div>
                </div>
              </div>
            </el-checkbox>
          </div>
        </el-scrollbar>
      </div>

      <!-- 右侧已选联系人部分 -->
      <div class="right-column">
        <div class="selected-users">
          <div v-for="(user, index) in selectedUsers" :key="index" class="selected-user">
            <div class="selected-avatar">
              <head-image :name="user.nickName" :url="user.headImage" :online="user.online"></head-image>
            </div>
            <div class="selected-user-name">{{ user.userName }}</div>
            <el-button type="danger" size="mini" @click="removeUser(user)" icon="el-icon-close"></el-button>
          </div>
        </div>

        <div class="action-buttons">
          <el-button v-if="selectedUsers.length === 1" type="primary" @click="startPrivateChat">私聊</el-button>
          <el-button v-if="selectedUsers.length > 1" type="primary" @click="startGroupChat">群聊</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import HeadImage from './HeadImage.vue';

export default {
  name: 'addFriendView',
  components: { HeadImage },
  data () {
    return {
      // 死数据+
      users: [
        { id: 1, userName: 'John Doe', nickName: 'John', headImage: '', online: true },
        { id: 2, userName: 'Jane Smith', nickName: 'Jane', headImage: '', online: false },
        { id: 3, userName: 'Michael Brown', nickName: 'Mike', headImage: '', online: true },
        { id: 4, userName: 'Emily White', nickName: 'Emy', headImage: '', online: false },
        { id: 5, userName: 'Daniel Lee', nickName: 'Dan', headImage: '', online: true },
      ],
      searchText: '',
      selectedUsers: [],
    };
  },
  props: {
    dialogVisible: {
      type: Boolean,
    },
  },
  computed: {
    // 基于搜索文本过滤用户列表
    filteredUsers () {
      if (!this.searchText) {
        return this.users;
      }
      return this.users.filter(user =>
        user.userName.toLowerCase().includes(this.searchText.toLowerCase()) ||
        user.nickName.toLowerCase().includes(this.searchText.toLowerCase())
      );
    }
  },
  methods: {
    onClose () {
      this.$emit('update:dialogVisible', false);
    },
    onSearch () {
      // 搜索功能实现，已经通过 computed 实现了动态过滤
    },
    removeUser (user) {
      console.log(this.selectedUsers);

      const index = this.selectedUsers.indexOf(user);
      if (index !== -1) {
        this.selectedUsers.splice(index, 1);
      }
    },
    startPrivateChat () {
      if (this.selectedUsers.length === 1) {
        // const user = this.selectedUsers[0];
        // 开始私聊
        // this.$router.push({ name: 'chat', params: { userId: user.id } });
      }
    },
    startGroupChat () {
      if (this.selectedUsers.length > 1) {
        // 开始群聊
        // const userIds = this.selectedUsers.map((user) => user.id);
        // this.$router.push({
        //   name: 'groupChat',
        //   params: { userIds: userIds.join(',') },
        // });
      }
    },
  },
};
</script>

<style lang="scss">
.el-dialog {
  min-width: 700px;
}

.dialog-content {
  display: flex;
  justify-content: space-between;
}

.left-column {
  flex: 1;
  padding-right: 20px;
}

.right-column {
  flex: 1;
  padding-left: 20px;
}

.user-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.add-friend-text {
  margin-left: 10px;
  flex: 1;
}

.text-user-name {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  font-size: 16px;
}

.online-status {
  font-size: 12px;
  font-weight: 600;
}

.online {
  color: #5fb878;
}

.selected-users {
  margin-top: 20px;
}

.selected-user {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  background-color: #f7f7f7;
  padding: 5px;
  border-radius: 5px;
}

.selected-avatar {
  margin-right: 10px;
}

.selected-user-name {
  flex: 1;
}

.action-buttons {
  margin-top: 20px;
  text-align: center;
}

.user-checkbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.input-with-select {
  margin-bottom: 15px;
}
</style>
